<template>
  <div>
    <h2>基本设置</h2>
    <Form
      ref="form"
      :model="setInfo"
      :rules="rules"
      label-position="top"
      class="ivu-mt"
    >
      <Row type="flex" :gutter="48">
        <Col v-bind="grid1">
          <FormItem label="头像" prop="avatar">
            <Avatar
              :src="setInfo.head_img_url ? setInfo.head_img_url : baseImg"
              class="setting-account-info-avatar"
              shape="square"
            />
            <Upload
              ref="upload"
              :on-success="successUpload"
              :action="baseUrl + '/v1/upload/images'"
              :show-upload-list="false"
              :data="datas"
              name="files"
              :format="['jpg', 'jpeg', 'png']"
              class="ivu-mt ivu-mb"
            >
              <Button icon="md-camera">修改头像</Button>
            </Upload>
          </FormItem>
        </Col>
        <Col v-bind="grid2">
          <FormItem label="姓名" prop="realname">
            <Input v-model="setInfo.realname" placeholder="请输入姓名" />
          </FormItem>
          <FormItem label="手机号" prop="mobile">
            <Input v-model="setInfo.mobile" placeholder="请输入手机号" />
          </FormItem>
          <FormItem label="性别">
            <RadioGroup v-model="setInfo.gender">
              <Radio :label="1">男</Radio>
              <Radio :label="2">女</Radio>
            </RadioGroup>
          </FormItem>
          <!-- <FormItem label="用户唯一标识">
                    <tag>{{setInfo.mobile_encrypt}}</tag>
                </FormItem> -->
          <FormItem label="所属项目">
            <Select
              v-model="setInfo.project_name"
              disabled
              multiple
              :max-tag-count="3"
              placeholder="请选择项目"
            >
              <Option
                v-for="(item, index) in project_name"
                :disabled="true"
                :value="item.value"
                :key="index"
              >
                {{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit">更新基本信息</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import {
  rbacmemberselfinfo,
  rbacmembereditinfo,
} from "@/api/hqapi/indexone.js";
import settings from "@/setting";
import util from "@/libs/util";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      baseUrl: settings.apiBaseURL,
      token: util.cookies.get("token"),
      grid1: {
        xl: {
          span: 12,
          order: 2,
        },
        lg: {
          span: 24,
          order: 1,
        },
        md: {
          span: 24,
          order: 1,
        },
        sm: {
          span: 24,
          order: 1,
        },
        xs: {
          span: 24,
          order: 1,
        },
      },
      datas: { type: "member" },
      loading: false,
      project_name: [],
      baseImg: require("@/assets/images/avater.png"),
      grid2: {
        xl: {
          span: 12,
          order: 1,
        },
        lg: {
          span: 24,
          order: 2,
        },
        md: {
          span: 24,
          order: 2,
        },
        sm: {
          span: 24,
          order: 2,
        },
        xs: {
          span: 24,
          order: 2,
        },
      },
      rules: {
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            message: "请填写正确的手机号",
            pattern: /^1[3456789]\d{9}$/,
            trigger: "blur",
          },
        ],
      },
      host: "",
      setInfo: {},
    };
  },
  props: {},
  computed: {
    ...mapState("admin/user", ["info"]),
  },
  methods: {
    ...mapActions("admin/user", ["set"]),
    initial() {
      // console.log(this.info, 'info')
      this.askData();
    },
    askData() {
      rbacmemberselfinfo().then((res) => {
        this.setInfo = res;
        for (let item of res.project_name) {
          this.project_name.push({ value: item, label: item });
        }
      });
    },
    // 上传文件
    successUpload(response, file, fileList) {
      this.logs("response", response);
      this.setInfo.head_img_url = `${response.data.host}${response.data.path[0]}`;
      this.setInfo.head_portrait = response.data.path[0];
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let formData = {
            name: this.setInfo.realname,
            mobile: this.setInfo.mobile,
            gender: this.setInfo.gender,
            head_portrait: this.setInfo.head_portrait || "",
          };
          rbacmembereditinfo(formData).then(() => {
            this.info.head_img_url = this.setInfo.head_img_url;
            this.set(this.info);
            this.$Message.success("信息更新成功!");
          });
        }
      });
    },
  },
  mounted() {
    this.initial();
  },
};
</script>
<style lang="less">
.setting-account-info {
  &-avatar {
    width: 90px;
    height: 90px;
  }
}
</style>
